import React, {FC} from 'react';
import "./index.less";
import HxCyCard from "@/components/HxCyCard";
import {Tag, Image} from "antd";
import default_art_cover from "@/assets/default_art_cover.png"
import HxScrollMenu from "@/components/HxScrollMenu";
import {Link} from "umi";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {useBackendEnum} from "kf-web-library";

interface DistinguishedSpotlightProps {
}


interface DsCharacterProps {
  personage: API.FrontJournalPersonage;
}

const DsCharacter: FC<DsCharacterProps> = (props) => {
  const {personage} = props;
  const {enumDict, enumTypeDict, getBackendEnum} = useBackendEnum();
  return (
    <div className={"ds-character"}>
      {/*<Link to={"/journal/1"} className={"ds-character-cover"}>
        <Image src={personage?.coverImg} fallback={default_art_cover} preview={false}/>
      </Link>*/}
      <div className={"ds-character-cover"}>
        <Image src={personage?.coverImg} fallback={default_art_cover} preview={false}/>
        <div className={"ds-character-type"}>{getBackendEnum("PersonageType", personage?.type)?.i18EnumDesc}</div>
      </div>
      <div className={"ds-character-content"}>
        {/*<Link to={"/journal/1"} className={"ds-character-name"}>
          {personage.name}
          <Tag>个人介绍</Tag>
        </Link>*/}
        <a className={"ds-character-name"}>
          {personage.name}
          <Tag>个人介绍</Tag>
        </a>
        <div className={"ds-character-intro"}>
          {personage.message}
        </div>
      </div>
    </div>
  );
};


const DistinguishedSpotlight: FC<DistinguishedSpotlightProps> = (props) => {

  const personagesReq = useRequest(() => API.queryFrontJournalPersonages({
    pageSize: 10,
  }), {});


  return (
    <HxCyCard className={"distinguished-spotlight-card"} title={"期刊人物风采"} subtext={"Distinguished Spotlight"}>
      <HxScrollMenu showArrow={false}>
        {
          personagesReq.data?.data?.map((item: API.FrontJournalPersonage) => {
            return (
              <DsCharacter key={item.id} personage={item}/>
            );
          })
        }
      </HxScrollMenu>
    </HxCyCard>
  );
};

export default DistinguishedSpotlight;
